JavaScriptã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªã®è©³çŽ°ãªæ¯èŒãããã©ãŒãã³ã¹ãæ©èœããŠãŒã¹ã±ãŒã¹ãè©äŸ¡ããäžçäžã®éçºè ãæé©ãªããŒã«ãéžæããã®ãæ¯æŽããŸãã
JavaScriptã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªïŒããã©ãŒãã³ã¹æ¯èŒãšã°ããŒãã«Webéçºã§ã®ãŠãŒã¹ã±ãŒã¹
Webéçºã®ãã€ãããã¯ãªäžçã«ãããŠãã¢ãã¡ãŒã·ã§ã³ã¯ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžããšã³ã²ãŒãžã¡ã³ãã®æ¹åãèŠèŠçã«é åçãªã€ã³ã¿ãŒãã§ãŒã¹ã®äœæã«ãããŠéèŠãªåœ¹å²ãæãããŸããæé©ãªããã©ãŒãã³ã¹ãšæãŸãã广ãéæããããã«ã¯ãé©åãªJavaScriptã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªãéžæããããšãäžå¯æ¬ ã§ãããã®å æ¬çãªã¬ã€ãã§ã¯ã人æ°ã®JavaScriptã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªãæ¯èŒãããã®ããã©ãŒãã³ã¹ãè©äŸ¡ãããŠãŒã¹ã±ãŒã¹ãæ¢ããäžçäžã®éçºè ããããžã§ã¯ãã®ããã«æ å ±ã«åºã¥ããæææ±ºå®ãè¡ããããæ¯æŽããŸããåçŽãªUIã¢ãã¡ãŒã·ã§ã³ããè€éãª3Dããžã¥ã¢ã©ã€ãŒãŒã·ã§ã³ãŸã§ãå¹ åºããããžã§ã¯ãã«é©ããã©ã€ãã©ãªãã«ããŒããŸããç¹ã«ãå°ååºæã®ãã¯ãããžãŒãäŸãé¿ããåœéçãªãªãŒãã£ãšã³ã¹ã«é©çšå¯èœã§æçãªã¢ãããŒãã«çŠç¹ãåœãŠãŸãã
ãªãJavaScriptã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªã䜿çšããã®ãïŒ
çŽç²ãªJavaScriptãšCSSã䜿çšããŠã¢ãã¡ãŒã·ã§ã³ãäœæããããšãå¯èœã§ãããã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªã«ã¯ããã€ãã®å©ç¹ããããŸãã
- ã¯ãã¹ãã©ãŠã¶äºææ§ïŒ ã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªã¯ãç°ãªããã©ãŠã¶éã®éäºææ§ãåŠçããæ§ã ãªãã©ãããã©ãŒã ã§ã¢ãã¡ãŒã·ã§ã³ãã·ãŒã ã¬ã¹ã«åäœããããšãä¿èšŒããŸãã
- ç°¡çŽ åãããæ§æïŒ è€éãªã¢ãã¡ãŒã·ã§ã³ãäœæããããã®ããçŽæçã§ç°¡æœãªæ§æãæäŸããèšè¿°ããå¿ èŠã®ããã³ãŒãéãåæžããŸãã
- ããã©ãŒãã³ã¹ã®æé©åïŒ å€ãã®ã©ã€ãã©ãªã¯ããã©ãŒãã³ã¹ã®ããã«æé©åãããŠãããããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ãªã©ã®æè¡ãå©çšããŠã¹ã ãŒãºãªã¢ãã¡ãŒã·ã§ã³ãä¿èšŒããŸãã
- é«åºŠãªæ©èœïŒ ã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªã«ã¯ãã€ãŒãžã³ã°é¢æ°ãã¿ã€ã ã©ã€ã³ãã·ãŒã±ã³ã¹ãªã©ã®é«åºŠãªæ©èœãå«ãŸããŠããããšãå€ããæŽç·Žãããã¢ãã¡ãŒã·ã§ã³ãäœæã§ããŸãã
- ã³ãã¥ããã£ãµããŒããšããã¥ã¡ã³ãïŒ äººæ°ã®ããã©ã€ãã©ãªã¯ãè±å¯ãªããã¥ã¡ã³ãããã¥ãŒããªã¢ã«ãã³ãã¥ããã£ãµããŒãã®æ©æµãåããŠãããåŠç¿ãåé¡è§£æ±ºã容æã«ãªããŸãã
人æ°ã®JavaScriptã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãª
æã人æ°ã®ããJavaScriptã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªã®ããã€ããã玹ä»ããŸãã
1. GSAP (GreenSock Animation Platform)
æŠèŠïŒ GSAPã¯ããã®åè¶ããããã©ãŒãã³ã¹ãä¿¡é Œæ§ãå æ¬çãªæ©èœã»ããã§ç¥ããã匷åã§å€çšéãªã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªã§ãããããŒåºåããŠã§ããµã€ããäžçäžã®ã€ã³ã¿ã©ã¯ãã£ããªäœéšã§äœ¿çšãããŠããŸãã
äž»ãªæ©èœïŒ
- ã¿ã€ã ã©ã€ã³ç®¡çïŒ GSAPã®TimelineLiteããã³TimelineMaxã¯ã©ã¹ã䜿çšãããšãè€æ°ã®ã¢ãã¡ãŒã·ã§ã³ãç°¡åã«ã·ãŒã±ã³ã¹åããã³å¶åŸ¡ã§ããŸãã
- é«åºŠãªã€ãŒãžã³ã°ïŒ ã«ã¹ã¿ã ã®ã€ãŒãžã³ã°ã«ãŒããå«ããå¹ åºãã€ãŒãžã³ã°é¢æ°ãæäŸããŸãã
- ãã©ã°ã€ã³ãšããŒã«ïŒ GSAPã¯ãSVGãããã¹ãããã®ä»ã®èŠçŽ ãã¢ãã¡ãŒã·ã§ã³åããããã®æ§ã ãªãã©ã°ã€ã³ãæäŸããŸãã
- ã¯ãã¹ãã©ãŠã¶äºææ§ïŒ ã¬ã¬ã·ãŒããŒãžã§ã³ãå«ãããã¹ãŠã®äž»èŠãªãã©ãŠã¶ããµããŒãããŸãã
- ããã©ãŒãã³ã¹ïŒ ããã©ãŒãã³ã¹ãé«åºŠã«æé©åãããŠãããè€éãªã¢ãã¡ãŒã·ã§ã³ã«é©ããŠããŸãã
ãŠãŒã¹ã±ãŒã¹ïŒ
- è€éãªUIã¢ãã¡ãŒã·ã§ã³ïŒ ã¿ã€ã ã©ã€ã³ãšé«åºŠãªã€ãŒãžã³ã°ã䜿çšããè€éãªUIã¢ãã¡ãŒã·ã§ã³ã®äœæã
- ã€ã³ã¿ã©ã¯ãã£ããªãŠã§ããµã€ãïŒ é åçãªã¢ãã¡ãŒã·ã§ã³ãšãã©ã³ãžã·ã§ã³ãåããã€ã³ã¿ã©ã¯ãã£ããªãŠã§ããµã€ãã®éçºã
- ãããŒåºåïŒ æé©åãããã¢ãã¡ãŒã·ã§ã³ãåãã髿§èœãªãããŒåºåã®äœæã
- ã²ãŒã éçºïŒ ã²ãŒã èŠçŽ ã®ã¢ãã¡ãŒã·ã§ã³åãšãã€ãããã¯ãªèŠèŠå¹æã®äœæã
äŸïŒ
GSAPã®äžè¬çãªãŠãŒã¹ã±ãŒã¹ã¯ããŠãŒã¶ãŒãã¹ã¯ããŒã«ããã«ã€ããŠãŠã§ãããŒãžäžã®èŠçŽ ãã¢ãã¡ãŒã·ã§ã³åããããšã§ããããã«ããããã©ã©ãã¯ã¹å¹æãçã¿åºããããé åçãªæ¹æ³ã§ã³ã³ãã³ãã衚瀺ãããã§ããŸããGSAPã¯ããã®çš®ã®ã¿ã¹ã¯ã«å¯ŸããŠåªããããã©ãŒãã³ã¹ãšæ©èœãæäŸããŸãã
2. Anime.js
æŠèŠïŒ Anime.jsã¯ãã·ã³ãã«ãªAPIãåãã軜éã§æè»ãªã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªã§ãããã®äœ¿ãããããšãæå°éã®ã³ãŒãã§è€éãªã¢ãã¡ãŒã·ã§ã³ãäœæã§ããèœåã§äººæ°ãéããŠããŸããæ¥æ¬ãããã©ãžã«ãŸã§ããŠã§ãéçºè ã«ãã£ãŠåºã䜿çšãããŠããŸãã
äž»ãªæ©èœïŒ
- ã·ã³ãã«ãªAPIïŒ ç°¡æœã§çŽæçãªæ§æã§ãåŠç¿ãšäœ¿çšã容æã§ãã
- CSSããããã£ãSVGãJavaScriptãªããžã§ã¯ãïŒ CSSããããã£ãSVG屿§ãJavaScriptãªããžã§ã¯ããªã©ãã¢ãã¡ãŒã·ã§ã³åããŸãã
- æè»ãªã¿ã€ã ã©ã€ã³ïŒ é å»¶ããªãã»ãããå«ãè€éãªã¿ã€ã ã©ã€ã³ã®äœæããµããŒãããŸãã
- ã€ãŒãžã³ã°é¢æ°ïŒ ã¹ã ãŒãºã§èªç¶ãªã¢ãã¡ãŒã·ã§ã³ãäœæããããã®æ§ã ãªã€ãŒãžã³ã°é¢æ°ãæäŸããŸãã
- 軜éïŒ ãã¡ã€ã«ãµã€ãºãå°ãããããããã©ãŒãã³ã¹ãéèŠãªã¢ããªã±ãŒã·ã§ã³ã«æé©ã§ãã
ãŠãŒã¹ã±ãŒã¹ïŒ
- UIèŠçŽ ã®ã¢ãã¡ãŒã·ã§ã³ïŒ ãã¿ã³ãã¡ãã¥ãŒãã¢ãŒãã«ãªã©ã®UIèŠçŽ ã®ã¢ãã¡ãŒã·ã§ã³åã
- SVGã¢ãã¡ãŒã·ã§ã³ïŒ ããŽãã€ã©ã¹ããã¢ã€ã³ã³ãªã©ã®è€éãªSVGã¢ãã¡ãŒã·ã§ã³ã®äœæã
- ããŒã¿ããžã¥ã¢ã©ã€ãŒãŒã·ã§ã³ïŒ ããŒã¿ããžã¥ã¢ã©ã€ãŒãŒã·ã§ã³ãã¢ãã¡ãŒã·ã§ã³åããŠãããé åçã§æçãªãã®ã«ããŸãã
- ã©ã³ãã£ã³ã°ããŒãžã®ã¢ãã¡ãŒã·ã§ã³ïŒ ã©ã³ãã£ã³ã°ããŒãžã«åŸ®åŠãªã¢ãã¡ãŒã·ã§ã³ã远å ããŠããŠãŒã¶ãŒãšã³ã²ãŒãžã¡ã³ããåäžãããŸãã
äŸïŒ
Anime.jsã¯ãSVGèŠçŽ ã®ã¢ãã¡ãŒã·ã§ã³ã«ãã䜿çšãããŸããäŸãã°ãäžçå°å³ãã¢ãã¡ãŒã·ã§ã³åãããŠãŒã¶ãŒãå°å³ãæäœããã«ã€ããŠç°ãªãå°åããã€ã©ã€ã衚瀺ããããšãã§ããŸããããã¯ãå°çããŒã¿ãé åçãªæ¹æ³ã§æç€ºããããã®éåžžã«å¹æçãªæ¹æ³ãšãªãåŸãŸãã
3. Three.js
æŠèŠïŒ Three.jsã¯ããã©ãŠã¶ã§3Dã°ã©ãã£ãã¯ã¹ãäœæããããã®åŒ·åãªJavaScriptã©ã€ãã©ãªã§ããå³å¯ã«ã¯ã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªã§ã¯ãããŸãããã3Dãªããžã§ã¯ããã·ãŒã³ãã¢ãã¡ãŒã·ã§ã³åããããã®åºç¯ãªæ©èœãæäŸããŸãããšãŒãããã®å·¥æ¥ãã¶ã€ã³ããã¢ãžã¢ã®ãããªã²ãŒã éçºãŸã§ãå¹ åºãçšéã§å±éãããŠããŸãã
äž»ãªæ©èœïŒ
- 3Dã¬ã³ããªã³ã°ïŒ ãã©ãŠã¶ã§ã®3Dãªããžã§ã¯ããšã·ãŒã³ã®ã¬ã³ããªã³ã°ãå¯èœã«ããŸãã
- ã¢ãã¡ãŒã·ã§ã³APIïŒ å転ãã¹ã±ãŒãªã³ã°ãç§»åãå«ã3Dãªããžã§ã¯ããã¢ãã¡ãŒã·ã§ã³åããããã®APIãæäŸããŸãã
- ã·ã§ãŒããŒïŒ é«åºŠãªèŠèŠå¹æãäœæããããã®ã«ã¹ã¿ã ã·ã§ãŒããŒããµããŒãããŸãã
- ãããªã¢ã«ãšãã¯ã¹ãã£ïŒ ãªã¢ã«ãª3Dã¢ãã«ãäœæããããã®å¹ åºããããªã¢ã«ãšãã¯ã¹ãã£ãæäŸããŸãã
- ã«ã¡ã©ã³ã³ãããŒã«ïŒ ãŠãŒã¶ãŒãæ§ã ãªã«ã¡ã©ã³ã³ãããŒã«ã䜿çšããŠ3Dã·ãŒã³ãšå¯Ÿè©±ã§ããããã«ããŸãã
ãŠãŒã¹ã±ãŒã¹ïŒ
- 3D補åã®å¯èŠåïŒ ã€ã³ã¿ã©ã¯ãã£ããªã¢ãã¡ãŒã·ã§ã³ã§è£œåã3Dã§ç޹ä»ããŸãã
- ã€ã³ã¿ã©ã¯ãã£ããªããŒã¿ããžã¥ã¢ã©ã€ãŒãŒã·ã§ã³ïŒ ã€ã³ã¿ã©ã¯ãã£ããª3DããŒã¿ããžã¥ã¢ã©ã€ãŒãŒã·ã§ã³ã®äœæã
- ããŒãã£ã«ãªã¢ãªãã£äœéšïŒ ãŠã§ãåãã®ããŒãã£ã«ãªã¢ãªãã£äœéšã®éçºã
- ã²ãŒã éçºïŒ ãã©ãŠã¶ã§ã®3Dã²ãŒã ã®äœæã
äŸïŒ
Three.jsã¯ãã€ã³ã¿ã©ã¯ãã£ããª3Dã¢ãã«ã®äœæã«åªããŠããŸãããŠã§ããµã€ãã§æ°ããè»çš®ã玹ä»ãããŠãŒã¶ãŒãè»ãå転ããããããºãŒã ã€ã³ããããå è£ ãèŠããã§ããããã«ããããšãæ³åããŠã¿ãŠãã ãããThree.jsã¯ããã®ã¬ãã«ã®ã€ã³ã¿ã©ã¯ãã£ããã£ãšãã£ããŒã«ãå®çŸã§ããŸãã
4. Velocity.js
æŠèŠïŒ Velocity.jsã¯ãjQueryã®$.animate()ãšäŒŒãAPIãæäŸããªãããããã©ãŒãã³ã¹ãå€§å¹ ã«åäžãããã¢ãã¡ãŒã·ã§ã³ãšã³ãžã³ã§ããCSSã¢ãã¡ãŒã·ã§ã³ãšJavaScriptã¢ãã¡ãŒã·ã§ã³ã®äž¡æ¹ããµããŒãããŸãã
äž»ãªæ©èœïŒ
- jQueryæ§æïŒ éŠŽæã¿ã®ããjQueryã©ã€ã¯ãªæ§æã䜿çšããŠãããããç°¡åã«å°å ¥ã§ããŸãã
- ããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ïŒ ã¹ã ãŒãºãªã¢ãã¡ãŒã·ã§ã³ã®ããã«ããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ãå©çšããŸãã
- ã«ã©ãŒã¢ãã¡ãŒã·ã§ã³ïŒ è²ã®ããããã£ã®ã¢ãã¡ãŒã·ã§ã³ããµããŒãããŸãã
- å€åœ¢ïŒ translateãrotateãscaleãªã©ã®CSSå€åœ¢ãã¢ãã¡ãŒã·ã§ã³åããŸãã
- æŽæ°ç¶æ³ïŒ æè¿ã®æŽæ°ã¯ã»ãšãã©ãªããæå 端ã®ãããžã§ã¯ãã«ã¯é©ããŠããªãå¯èœæ§ããããŸãã
ãŠãŒã¹ã±ãŒã¹ïŒ
- UIãã©ã³ãžã·ã§ã³ïŒ ç°ãªãUIç¶æ éã®ã¹ã ãŒãºãªãã©ã³ãžã·ã§ã³ã®äœæã
- ã¹ã¯ããŒã«å¹æïŒ ãã©ã©ãã¯ã¹ã¹ã¯ããŒã«ããã®ä»ã®ã¹ã¯ããŒã«å¹æã®å®è£ ã
- ã·ã³ãã«ãªã¢ãã¡ãŒã·ã§ã³ïŒ ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããã®ã·ã³ãã«ãªã¢ãã¡ãŒã·ã§ã³ã®è¿œå ã
äŸïŒ
Velocity.jsã¯ããŠãŒã¶ãŒãããŒãžãäžã«ã¹ã¯ããŒã«ããã«ã€ããŠã³ã³ãã³ãããã§ãŒãã€ã³ããããªã©ãã·ã³ãã«ã§é«éãªãã©ã³ãžã·ã§ã³ãäœæããã®ã«æé©ã§ãããã®jQueryã©ã€ã¯ãªæ§æã«ãããæ¢åã®ãããžã§ã¯ãã«ç°¡åã«çµ±åã§ããŸãã
ããã©ãŒãã³ã¹æ¯èŒ
ã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªã®ããã©ãŒãã³ã¹ã¯ãã¹ã ãŒãºã§é åçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããäžã§éåžžã«éèŠã§ãã以äžã«ãåè¿°ã®ã©ã€ãã©ãªã®ããã©ãŒãã³ã¹ç¹æ§ã®äžè¬çãªæ¯èŒã瀺ããŸãã
- GSAPïŒ ç¹ã«è€éãªã¢ãã¡ãŒã·ã§ã³ãã¿ã€ã ã©ã€ã³ã«ãããŠããã®åªããããã©ãŒãã³ã¹ã§ç¥ãããŠããŸããGSAPã¯ãã°ãã°æé©åãããã³ãŒããšå¹ççãªã¬ã³ããªã³ã°æè¡ã䜿çšããŸãã
- Anime.jsïŒ ç¹ã«ã·ã³ãã«ãªã¢ãã¡ãŒã·ã§ã³ãSVGã¢ãã¡ãŒã·ã§ã³ã§è¯å¥œãªããã©ãŒãã³ã¹ãçºæ®ããŸããäžè¬çã«ååã«æé©åãããŠããŸãããå€§èŠæš¡ãŸãã¯è€éãªã¢ãã¡ãŒã·ã§ã³ã§ã¯ãããªãæé©åãå¿ èŠã«ãªãå ŽåããããŸãã
- Three.jsïŒ ããã©ãŒãã³ã¹ã¯ã3Dã·ãŒã³ã®è€éããã¢ãã¡ãŒã·ã§ã³åããããªããžã§ã¯ãã®æ°ã«å€§ããäŸåããŸããã¹ã ãŒãºãªããã©ãŒãã³ã¹ãå®çŸããã«ã¯ãã·ãŒã³ã®æé©åãšå¹ççãªã¬ã³ããªã³ã°æè¡ã®äœ¿çšãäžå¯æ¬ ã§ãã
- Velocity.jsïŒ ã·ã³ãã«ãªã¢ãã¡ãŒã·ã§ã³ããã©ã³ãžã·ã§ã³ã«å¯ŸããŠè¯å¥œãªããã©ãŒãã³ã¹ãçºæ®ããŸããã¹ã ãŒãºãªã¬ã³ããªã³ã°ã®ããã«ããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ã掻çšããŸãã
ã¢ãã¡ãŒã·ã§ã³ããã©ãŒãã³ã¹ã«åœ±é¿ãäžããèŠå ïŒ
- ã¢ãã¡ãŒã·ã§ã³åãããèŠçŽ ã®æ°ïŒ 倿°ã®èŠçŽ ãã¢ãã¡ãŒã·ã§ã³åãããšãããã©ãŒãã³ã¹ã«å€§ããªåœ±é¿ãäžããå¯èœæ§ããããŸãã
- ã¢ãã¡ãŒã·ã§ã³ã®è€éãïŒ è€æ°ã®ããããã£ãã€ãŒãžã³ã°é¢æ°ãæã€è€éãªã¢ãã¡ãŒã·ã§ã³ã¯ãããå€ãã®ãªãœãŒã¹ãæ¶è²»ããå¯èœæ§ããããŸãã
- ãã©ãŠã¶ã®äºææ§ïŒ ãã©ãŠã¶ã«ãã£ãŠã¢ãã¡ãŒã·ã§ã³ã®åŠçæ¹æ³ãç°ãªããããã©ãŒãã³ã¹ã«åœ±é¿ãäžããããšããããŸãã
- ããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ïŒ ããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ãå©çšããããšã§ãç¹ã«è€éãªã¢ãã¡ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
- ã³ãŒãã®æé©åïŒ æé©åãããã³ãŒããèšè¿°ããäžèŠãªèšç®ãé¿ããããšã§ãã¢ãã¡ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
é©åãªã©ã€ãã©ãªã®éžæ
ãããžã§ã¯ãã«æé©ãªã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªã¯ãç¹å®ã®ããŒãºãšèŠä»¶ã«ãã£ãŠç°ãªããŸããæ±ºå®ãäžãéã«ã¯ã以äžã®èŠå ãèæ ®ããŠãã ããã
- ãããžã§ã¯ãã®è€éãïŒ è€éãªã¢ãã¡ãŒã·ã§ã³ãã¿ã€ã ã©ã€ã³ã«ã¯ãGSAPãåªããéžæè¢ã§ããããã·ã³ãã«ãªã¢ãã¡ãŒã·ã§ã³ã«ã¯ãAnime.jsãVelocity.jsã§ååãããããŸããã
- ããã©ãŒãã³ã¹èŠä»¶ïŒ ããã©ãŒãã³ã¹ãéèŠã§ããå Žåã¯ãæé©åã§ç¥ãããããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ãå©çšããã©ã€ãã©ãªãéžæããŠãã ãããGSAPã¯åžžã«ãããããã©ãŒããŒãšããŠã©ã³ã¯ä»ããããŠããŸãã
- 䜿ããããïŒ åŠç¿ãšäœ¿çšãç°¡åãªã©ã€ãã©ãªãæ¢ããŠããå Žåã¯ãAnime.jsãšVelocity.jsãè¯ãéžæè¢ã§ãã
- 3DèŠä»¶ïŒ 3Dã¢ãã¡ãŒã·ã§ã³ãäœæããå¿ èŠãããå Žåã¯ãThree.jsãéžæãã¹ãã©ã€ãã©ãªã§ãã
- ã³ãã¥ããã£ãµããŒãïŒ å¿ èŠãªãšãã«å©ããåŸãããããã«ã匷åãªã³ãã¥ããã£ãšè±å¯ãªããã¥ã¡ã³ããæã€ã©ã€ãã©ãªãéžæããŠãã ããã
- ãããžã§ã¯ãã®äŸåé¢ä¿ïŒ ã©ã€ãã©ãªã«æ¢åã®ãããžã§ã¯ããšç«¶åããå¯èœæ§ã®ããäŸåé¢ä¿ããããã©ãããæ€èšããŠãã ããã
- ããŒã ã®ç¿çåºŠïŒ ããŒã ããã§ã«ç¥ã£ãŠããããåŠç¿ææ¬²ã®ããã©ã€ãã©ãªãéžæããããšã圹ç«ã¡ãŸãã
ã¢ãã¡ãŒã·ã§ã³ããã©ãŒãã³ã¹ã®ããã®ãã¹ããã©ã¯ãã£ã¹
éžæããã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªã«é¢ãããã以äžã®ãã¹ããã©ã¯ãã£ã¹ã«åŸãããšã§ãã¢ãã¡ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
- ããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ã®äœ¿çšïŒ CSSã®transformãšopacityã®å€æŽãå©çšããŠãããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ãããªã¬ãŒããŸãã
- DOMæäœã®æå°åïŒ ã¢ãã¡ãŒã·ã§ã³äžã®é床ãªDOMæäœãé¿ããŸãã
- ç»åãšã¢ã»ããã®æé©åïŒ æé©åãããç»åãšã¢ã»ããã䜿çšããŠããã©ãŠã¶ãžã®è² è·ã軜æžããŸãã
- ãããŠã³ã¹ãšã¹ãããã«ïŒ ãããŠã³ã¹ãšã¹ãããã«ã®æè¡ã䜿çšããŠãã¢ãã¡ãŒã·ã§ã³ã®æŽæ°é »åºŠãå¶éããŸãã
- ã³ãŒãã®ãããã¡ã€ãªã³ã°ïŒ ãã©ãŠã¶ã®éçºè ããŒã«ã䜿çšããŠã³ãŒãããããã¡ã€ãªã³ã°ããããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ããŸãã
- è€æ°ããã€ã¹ã§ã®ãã¹ãïŒ ç°ãªãããã€ã¹ããã©ãŠã¶ã§ã¢ãã¡ãŒã·ã§ã³ããã¹ãããäžè²«ããããã©ãŒãã³ã¹ã確ä¿ããŸãã
Webã¢ãã¡ãŒã·ã§ã³ã«é¢ããã°ããŒãã«ãªèæ ®äºé
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«Webã¢ãã¡ãŒã·ã§ã³ãéçºããéã«ã¯ã以äžã®ç¹ãèæ ®ããããšãäžå¯æ¬ ã§ãã
- æåçãªé æ ®ïŒ ã¢ãã¡ãŒã·ã§ã³ãæåçã«é æ ®ãããŠãããç¹å®ã®å°åã§äžå¿«ãŸãã¯äžé©åãšèŠãªãããå¯èœæ§ã®ããã³ã³ãã³ããé¿ããããã«ããŠãã ãããäŸãã°ãç¹å®ã®æã®ãžã§ã¹ãã£ãŒãè²ã®é£æ³ã¯ãæåã«ãã£ãŠç°ãªãæå³ãæã€å ŽåããããŸãã
- ã¢ã¯ã»ã·ããªãã£ïŒ é害ãæã€ãŠãŒã¶ãŒãã¢ãã¡ãŒã·ã§ã³ã«ã¢ã¯ã»ã¹ã§ããããã«ããŸããã¢ãã¡ãŒã·ã§ã³ã«ä»£æ¿ããã¹ãã®èª¬æãæäŸããããŒããŒãã§æäœã§ããããã«ããŸãã
- ããŒã«ãªãŒãŒã·ã§ã³ïŒ ç°ãªãèšèªãå°åããµããŒãããããã«ã¢ãã¡ãŒã·ã§ã³ãããŒã«ã©ã€ãºããŸããããã¹ãã®æ¹åïŒå·Šããå³ vs. å³ããå·ŠïŒãèæ ®ããããã«å¿ããŠã¢ãã¡ãŒã·ã§ã³ãé©å¿ãããŸãã
- ãããã¯ãŒã¯ç¶æ³ïŒ ãããã¯ãŒã¯æ¥ç¶ãé ããŠãŒã¶ãŒåãã«ã¢ãã¡ãŒã·ã§ã³ãæé©åããŸããããå°ãããã¡ã€ã«ãµã€ãºã䜿çšããããªããŒãæè¡ã®äœ¿çšãæ€èšããŸãã
- ããã€ã¹äºææ§ïŒ æºåž¯é»è©±ãã¿ãã¬ããããã¹ã¯ãããã³ã³ãã¥ãŒã¿ãªã©ãæ§ã ãªããã€ã¹ã§ã¢ãã¡ãŒã·ã§ã³ãããŸãæ©èœããããšã確èªããŸãã
- ã°ããŒãã«CDNïŒ ã°ããŒãã«ã«åæ£ãããã³ã³ãã³ãããªããªãŒãããã¯ãŒã¯ïŒCDNïŒã䜿çšããããšã§ãäžçäžã®ãŠãŒã¶ãŒã®èªã¿èŸŒã¿æéãå€§å¹ ã«ççž®ã§ããŸãã
çµè«
é©åãªJavaScriptã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªãéžæããããšã¯ãé åçã§é«æ§èœãªWebãšã¯ã¹ããªãšã³ã¹ãäœæããããã«äžå¯æ¬ ã§ããåã©ã€ãã©ãªã®é·æãšçæãçè§£ãããã®ããã©ãŒãã³ã¹ç¹æ§ãè©äŸ¡ããã¢ãã¡ãŒã·ã§ã³æé©åã®ãã¹ããã©ã¯ãã£ã¹ãèæ ®ããããšã§ãäžçäžã®éçºè ã¯ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããWebã¢ããªã±ãŒã·ã§ã³ã®å šäœçãªåè³ªãæ¹åããæ å ±ã«åºã¥ããæææ±ºå®ãè¡ãããšãã§ããŸããã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«ã¢ãã¡ãŒã·ã§ã³ããã¶ã€ã³ããéã«ã¯ãæåçãªãã¥ã¢ã³ã¹ãšã¢ã¯ã»ã·ããªãã£ãèæ ®ããããšãå¿ããªãã§ãã ããã
ãã®å æ¬çãªã¬ã€ãã¯ãJavaScriptã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªãéžæããæŽ»çšããããã®ç¢ºåºããåºç€ãæäŸããŸããWebãã¯ãããžãŒãé²åãç¶ããäžã§ãææ°ã®é²æ©ã«ã€ããŠåžžã«ææ°ã®æ å ±ãå ¥æããããã«å¿ããŠã¢ãã¡ãŒã·ã§ã³æŠç¥ãé©å¿ãããããšãéèŠã§ãããããã®ååãåãå ¥ããããšã§ãçã«æ³šç®ãã¹ããã°ããŒãã«ã«åœ±é¿åã®ããWebãšã¯ã¹ããªãšã³ã¹ãåµé ããããšãã§ããŸãã